<template>
  <div class="tab_home">
    <!-- 热销/新品标签栏 -->
    <van-tabs v-model="navActive" background="#EE3F00" line-width="0" line-height="0" :swipeable="true" animated>
      <van-tab title-style="span_tag">
        <div slot="title" style="text-align:right;padding-right:10px;height:31px;">
          <span style="position:absolute;right:10px;top:0;margin-top:8.5px;height:14px;line-height:14px;">热销</span> 
        </div>
        <hot-sale />
      </van-tab>
      <van-tab title-style="text-align:left;">
        <div slot="title" style="text-align:left;padding-left:10px;height:31px;">
          <span style="position:absolute;left:10px;top:0;margin-top:8.5px;height:14px;line-height:14px;">新品</span>
        </div>
        <new-product />
      </van-tab>
    </van-tabs>
  </div>  
</template>

<script>
import hotSale from './tabbar-hot-sale';
import newProduct from './tabbar-new-product';
import scrollFixed from '@/mixin/scroll-fixed';
import { Tab, Tabs } from 'vant';
import _ from 'lodash';

export default {
  mixins: [scrollFixed],
  data() {
    return {
      navActive: 0,
    }
  },

  components: {
    [hotSale.name]: hotSale,
    [newProduct.name]: newProduct,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },

};
</script>
<style lang="scss" scoped>
/deep/ .van-tabs__nav--line{
  position: fixed;
  z-index: 100;
  padding-bottom: 0;
  height: 31px;
  width: 100%;
}
/deep/ .van-tab{
  line-height: 31px;
}
/deep/ .van-tabs__wrap{
  height: 31px;
}
/deep/ .van-tabs__line{
  background-color:transparent;
}
.van-ellipsis:first-child{
  text-align: right;
}
.span_tag{
  display:block;
  width:50%;
  float: left;
  background-color:$orange;
}
/deep/ .van-tab--active {
  color: #fff;
}
.inactive{
  color:	#A0A0A0;
}
</style>


